<template>
  <div class="svg-index">
    <div class="item" v-for="(item, i) in data" :key="i" @click="copy(item.name)">
      <i v-html="item.svg"></i>
      <p>{{ item.name }}</p>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useMessage } from 'naive-ui'
import * as svgs from "@/utils/svgs.js";
const message = useMessage()
const data = ref([]);
for (const key in svgs) {
  data.value.push({
    name: key,
    svg: svgs[key],
  });
}
const copy = (name) => {
  const input = document.createElement('input');
  input.value = name;
  document.body.appendChild(input);
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);
  message.success('复制成功');
}
</script>
<style lang="less" scoped>
.svg-index {
  display: flex;
  flex-wrap: wrap;
  .item {
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center; 
    border: 1px solid #ccc;

    p{
      margin: 0;
      font-size: 14px;
   
    }
  }

  i {
    font-size: 30px;   cursor: pointer;
  }
  // background: url("../assets/img/bgc.png") center center no-repeat;
  // background-size: cover;
}
</style>
